<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app" style="border: 1px solid red; padding: 10px;">
	  <h1>新闻列表</h1>
	  <!-- 引入子组件（无法识别） -->
	  <news-item></news-item>
	  <!-- 引入父组件 -->
	  <news-list></news-list>
	  </div>
 <!-- 父组件模板 -->
 <template id="news-list-template">
	 <ul style="border: 1px solid blue; padding: 10px;">
	 <!-- 在父组件中引入两个子组件 -->
	 <news-item></news-item>
	 <news-item></news-item>
	 </ul>
	 </template>
	 <!-- 子组件模板 -->
	 <template id="news-item-template">
	 <li style="border: 1px solid green; padding: 10px;">
	 新闻标题
	 </li>
	 </template>
	
	 <script src="js/vue.js"></script>
	 <script>
	 // 创建子组件
	 const newsItem = {
	 // 引用子组件模板
	 template: '#news-item-template'
	 }
	 // 创建父组件
	 const newsList = {
	 // 引用父组件模板
	 template: '#news-list-template',
	 components: {
	 // 注册子组件
	 'news-item': newsItem
	 }
	 };
		  // 创建 Vue 实例，并将父组件注册到 Vue 实例中
		  const app = new Vue({
		  el: '#app',
		  components: {
		  // 注册父组件
		  'news-list': newsList,
		  }
		  })
		   </script>
	</body>
</html>
